<template>
  <div>
    <button @click="ishow">显示/隐藏</button>
    <transition appear name="dh">
        <h1 v-show="isshow">你好呀</h1>
    </transition>
  </div>
</template>

<script>
    import 'animate.css';
    export default {
        name: 'donghua',
        data() {
          return {
            isshow: true,
          }
        },
        methods: {
          ishow(){
            this.isshow=!this.isshow
            console.log(this.isshow);
          }
        }
    }
</script>

<style scoped>
    h1 {
        background-color: pink;
    }
    .dh-enter-active {
      transition: all .3s ease;
    }
    .dh-leave-active {
      transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .dh-enter, .dh-leave-to{
      transform: translateX(10px);
      opacity: 0;
    }
</style>